A Pen by Hugo.

index.html

<article id="contentWrapper">
  <p id="textParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi dolorem dolore omnis minus quaerat porro inventore suscipit nulla perferendis rem nostrum quisquam esse recusandae voluptates aperiam voluptas error explicabo officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis voluptatum ipsum nihil dolores quidem adipisci quisquam molestias dolore totam at natus ipsam excepturi soluta vero vitae ducimus ratione! Provident itaque!</p>
</article>

script.js

function getSelectedText () {
  if (window.getSelection) {
      var range = window.getSelection ();
      return range.toString()
  } 
  else {
      if (document.selection.createRange) {
          var range = document.selection.createRange ();
          return range.text
      }
  }
}

function createTweetLink (text, e) {
  
  var oldTweetLink = document.getElementById("tweetLink");
  if (oldTweetLink != null && typeof oldTweetLink != "undefined"){  
    oldTweetLink.parentNode.removeChild(oldTweetLink);
  }
  
  if (text === "")
    return undefined;
  var newTweetLink = document.createElement("a");
  newTweetLink.href = "http://twitter.com/home?status=" + escape(text);
  newTweetLink.id = "tweetLink";
  newTweetLink.innerHTML = "Tweet";
  var appendedTweetLink = document.getElementById("contentWrapper").appendChild(newTweetLink);
  $(appendedTweetLink).css({"top": e.pageY - 40, "left": e.pageX + 10});
  return newTweetLink;
}

var textParagraph = document.getElementById("textParagraph");
textParagraph.addEventListener("mouseup", function(e){
  tweetLink = createTweetLink(getSelectedText(), e);
}, false);

style.css

body{
  font-family: "Helvetica Neue", sans-serif;
  font-size: 20px;
}
#contentWrapper{
  position: relative;
}
#tweetLink{
  position: absolute;
  display: inline-block;
  width: 5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  background: rgba(10,10,200,0.8);
  color: #fff;
  text-decoration: none;
  box-shadow: 0px 0px 10px 2px rgba(10,10,200,0.6);
  transition: all .3s ease;
}
#tweetLink:hover{
  background: rgba(10,10,200,1);
}

Tweet-selected-text.markdown

Tweet selected text

When a user selects a text, display a simple button to tweet that text. Maybe will evolve to a JavaScript plugin.

A Pen by Hugo on CodePen.

License.